<template>
  <div
    class="el-collapse-item"
    :class="{ 'is-active': isActive, 'is-disabled': disabled }"
  >
    <div
      role="tab"
      :aria-expanded="isActive"
      :aria-controls="`el-collapse-content-${id}`"
      :aria-describedby="`el-collapse-content-${id}`"
    >
      <div
        class="el-collapse-item__header"
        @click="handleHeaderClick"
        role="button"
        :id="`el-collapse-head-${id}`"
        :tabindex="disabled ? undefined : 0"
        @keyup.space.enter.stop="handleEnterClick"
        :class="{
          focusing: focusing,
          'is-active': isActive,
        }"
        @focus="handleFocus"
        @blur="focusing = false"
      >
        <slot name="title">{{ title }}</slot>
        <i
          class="el-collapse-item__arrow el-icon-arrow-right"
          :class="{ 'is-active': isActive }"
        >
        </i>
      </div>
    </div>
    <!-- <el-collapse-transition> -->
    <div
      class="el-collapse-item__wrap"
      role="tabpanel"
      :aria-hidden="!isActive"
      :aria-labelledby="`el-collapse-head-${id}`"
      :id="`el-collapse-content-${id}`"
    >
      <MyScrollbar>
        <div class="el-collapse-item__content">
          <slot></slot>
        </div>
      </MyScrollbar>
    </div>
    <!-- </el-collapse-transition> -->
  </div>
</template>
    <script>
// import ElCollapseTransition from "element-ui/src/transitions/collapse-transition";
import Emitter from "element-ui/src/mixins/emitter";
import { generateId } from "element-ui/src/utils/util";
import MyScrollbar from "@/components/MyScrollbar";

export default {
  name: "ElCollapseItem",

  componentName: "ElCollapseItem",

  mixins: [Emitter],

  //   components: { ElCollapseTransition },
  components: { MyScrollbar },

  data() {
    return {
      contentWrapStyle: {
        height: "auto",
        display: "block",
      },
      contentHeight: 0,
      focusing: false,
      isClick: false,
      id: generateId(),
    };
  },

  inject: ["collapse"],

  props: {
    title: String,
    name: {
      type: [String, Number],
      default() {
        return this._uid;
      },
    },
    disabled: Boolean,
  },

  computed: {
    isActive() {
      return this.collapse.activeNames.indexOf(this.name) > -1;
    },
  },

  methods: {
    handleFocus() {
      setTimeout(() => {
        if (!this.isClick) {
          this.focusing = true;
        } else {
          this.isClick = false;
        }
      }, 50);
    },
    handleHeaderClick() {
      if (this.disabled) return;
      this.dispatch("ElCollapse", "item-click", this);
      this.focusing = false;
      this.isClick = true;
    },
    handleEnterClick() {
      this.dispatch("ElCollapse", "item-click", this);
    },
  },
};
</script>
  <style scoped lang="less">
.el-collapse-item {
  display: flex;
  flex-direction: column;
  flex-grow: 0.00001;
  transition: 0.3s flex-grow ease-in-out;
  position: relative;
  &.is-active {
    flex-grow: 1;
  }
  /deep/ .el-collapse-item__wrap {
    flex-grow: 0.00001;
    overflow: auto;
    position: absolute;
    top: 49px;
    left: 0px;
    width: 100%;
    height: calc(100% - 48px);
  }
}
</style>
    